<template>
  <div class="home" >
    <div style="display: flex;justify-content: center;margin-top: 50px">
<!--      <h1>流波传感器</h1>-->
    </div>
    <div style="display: flex;justify-content: center;">
      <el-table :data="tableDataList" border  style="width: 80%" v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="deviceSerializable" label="设备序列号"/>
        <el-table-column prop="remoteAddressStr" label="设备IP"/>
        <el-table-column prop="connectTime" label="链接时间" width="200px"/>
        <el-table-column prop="samplingFrequency" label="采样频率"/>
        <el-table-column label="放大倍数">
          <template #default="scope">
            <span v-if="scope.row.magnification!=null">a:{{scope.row.magnification.a}}  |  b:{{scope.row.magnification.b}}</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column label="采集状态" width="200px">
          <template #default="scope">
            <el-text v-if="scope.row.collectData&&scope.row.deviceSerializable!=null" type="success">正在采集</el-text>
            <el-text v-if="!scope.row.collectData&&scope.row.deviceSerializable==null" type="danger">停止采集(请获取设备编号)</el-text>
            <el-text v-if="!scope.row.collectData&&scope.row.deviceSerializable!=null" type="danger">停止采集(请开始采集)</el-text>
            <el-text v-if="scope.row.collectData&&scope.row.deviceSerializable==null" type="danger">异常采集(未知设备，请停止采集)</el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template #default="scope">
            <el-button v-if="scope.row.deviceSerializable==null&&!scope.row.collectData" @click="getDeviceSerializable(scope.row)" link type="primary" size="small" >获取设备编号</el-button>
            <el-button v-if="!scope.row.collectData&&scope.row.deviceSerializable!=null" @click="startCollect(scope.row)" link type="primary" size="small" >开始采集</el-button>
            <el-button v-if="scope.row.collectData" @click="stopCollect(scope.row)" link type="primary" size="small" >停止采集</el-button>
            <template v-if="!scope.row.collectData" >
              <el-button @click="getMagnification(scope.row)" link type="primary" size="small" >设置放大倍数</el-button>
              <el-button @click="getSamplingFrequency(scope.row)" link type="primary" size="small" >设置采样频率</el-button>
            </template>

          </template>
        </el-table-column>
      </el-table>
    </div>

<!--    放大倍数-->
    <el-dialog v-model="dialogVisible" title="设置放大倍数" width="40%" draggable>
      <el-form :model="magnificationForm">
        <el-form-item label="a：">
          <el-input-number v-model="magnificationForm.a" :precision="0" :min="1" :max="32"/>
        </el-form-item>
        <el-form-item label="b：">
          <el-input-number v-model="magnificationForm.b" :precision="0" :min="1" :max="32"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="setMagnification">确定</el-button>
      </span>
      </template>
    </el-dialog>

<!--   采样频率 -->
    <el-dialog v-model="samplingFrequencyDialogVisible" title="设置采样频率" width="40%" draggable>
      <el-form :model="device">
        <el-form-item label="采样频率：">
          <el-input-number v-model="device.samplingFrequency" :precision="0" :min="0" :max="200"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="samplingFrequencyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="setSamplingFrequency">确定</el-button>
      </span>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import {
  getdeviceSerializableApi,getMagnificationApi,setMagnificationApi,
  deviceListApi,startCollectApi,stopCollectApi,getSamplingFrequencyApi,setSamplingFrequencyApi} from './HomeView'
import { onMounted,ref} from 'vue'

const tableDataList = ref()
const loading = ref(false)
const dialogVisible = ref(false)
const samplingFrequencyDialogVisible = ref(false)

const magnificationForm = ref({})
const device = ref([])


onMounted(() => {
  deviceList()
})

const getDeviceSerializable =(row)=>{
  getdeviceSerializableApi(row.sessionId).then(result=>{
    deviceList()
  })
}
const deviceList = ()=>{
  loading.value = true
  setTimeout(function() {
    deviceListApi().then(result=>{
      tableDataList.value = result.data;
      loading.value = false
    })
  }, 2000);

}
const startCollect = (row)=>{
  startCollectApi(row.deviceSerializable).then(result=>{
    deviceList()
  })
}

const stopCollect = (row)=>{
  stopCollectApi(row.sessionId).then(result=>{
    deviceList()
  })
}

const getMagnification = (row)=>{
  magnificationForm.value.sessionId=row.sessionId
  getMagnificationApi(row.sessionId).then(result=>{
    deviceList()
    dialogVisible.value = true
    tableDataList.value.forEach((item)=>{
      if (item.sessionId == row.sessionId&&item.magnification) {
        magnificationForm.value.a = item.magnification.a
        magnificationForm.value.b = item.magnification.b
      }
    })
  })
}

const setMagnification = ()=>{
  setMagnificationApi(magnificationForm.value.sessionId,magnificationForm.value.a,magnificationForm.value.b).then(result=>{
    deviceList()
    dialogVisible.value = false
  })
}

/**
 * 采样频率
 * @param row
 */
const getSamplingFrequency = (row)=>{
   getSamplingFrequencyApi(row.sessionId).then(result=>{
   deviceList()
    tableDataList.value.forEach((item)=>{
      if (item.sessionId == row.sessionId) {
        device.value = row
        samplingFrequencyDialogVisible.value = true
      }
    })
  })
}

const setSamplingFrequency = ()=>{
  setSamplingFrequencyApi(device.value.sessionId,device.value.samplingFrequency).then(result=>{
    deviceList()
    samplingFrequencyDialogVisible.value =false
  })
}

</script>
